<template>
  <div>
    <div class="el-icon-video-play" style="font-size:30px;margin:20px 0 20px 20px;cursor: pointer;" @click=play()></div>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-table
          :data="tableDataLeft"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column width="55">
            <template slot-scope="scope">
              <el-radio v-model="leftname" :label="scope.row">{{
                ""
              }}</el-radio>
            </template>
          </el-table-column>
          <el-table-column label="选择播放文件" width="120">
            <template slot-scope="scope">{{ scope.row.name }}</template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="12">
        <el-table
          :data="tableDataRight"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column width="55">
            <template slot-scope="scope">
              <el-radio v-model="rightname" :label="scope.row">{{
                ""
              }}</el-radio>
            </template>
          </el-table-column>
          <el-table-column label="选择播放区域" width="120">
            <template slot-scope="scope">{{ scope.row.name }}</template>
          </el-table-column>
          <el-table-column label="状态" width="120">
            <template slot-scope="scope">{{ scope.row.status }}</template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableDataLeft: [
        { name: "火宅警报通知" },
        { name: "消防安全通知" },
        { name: "消防训练通知" },
        { name: "电子会议通知" },
        { name: "假期安排通知" },
        { name: "消防安全通知" },
        { name: "假期安排通知" },
        { name: "开启语音广播" },
        { name: "假期安排通知" },
        { name: "开启语音广播" },
        { name: "假期安排通知" },
        { name: "开启语音广播" },
      ],
      tableDataRight: [
        { name: "A栋101", status: "播放" },
        { name: "A栋102", status: "暂停" },
        { name: "A栋103", status: "停止" },
        { name: "A栋104", status: "暂停" },
        { name: "A栋105", status: "播放" },
        { name: "A栋106", status: "暂停" },
        { name: "A栋107", status: "暂停" },
        { name: "A栋108", status: "暂停" },
        { name: "A栋110", status: "停止" },
        { name: "A栋111", status: "暂停" },
        { name: "A栋112", status: "暂停" },
        { name: "A栋113", status: "播放" },
      ],
      leftname: "",
      rightname: "",
    };
  },
  methods: {
    play() {
        this.$message.info('正在播放')
    }
  }
};
</script>
